# CSS3 Animations

« Previous
Next Chapter »

## CSS3 Animations

CSS3 animations can replace animations created by Flash and JavaScript in existing web pages.

CSS3
Animation

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
@keyframes | 10.0 | 4.0 -webkit- | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o-
animation | 10.0 | 4.0 -webkit- | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o-

## CSS3 @keyframes Rule

The @keyframes rule is where the animation is created.

Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

## CSS3 Animation

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector (element) by specifying at least these two properties:

- the name of the animation
- the duration of the animation

## Example

Bind the "myfirst" animation to the <div> element. Animation duration: 5 seconds:

div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
Try it yourself »

Note: If the duration part is not specified, the animation will have no effect, because the default value is 0.

## What Are CSS3 Animations?

An animation lets an element gradually change from one style to another.

You can change as many properties you want, as many times you want.

You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).

0% represents the start of the animation, 100% is when the animation is complete.

## Example

Change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete:

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Try it yourself »

## Example

Change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete:

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
Try it yourself »

## More Animation Examples

The example below uses seven of the animation properties:

## Example

div {
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
Try it yourself »

The same animation effect as the example above (except the animation-play-state property). However, here we are using the shorthand animation property:

## Example

div {
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}
Try it yourself »

## CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:

Property | Description | CSS
--- | --- | ---
@keyframes | Specifies the animation | 3
animation | A shorthand property for setting all the animation properties, except the animation-play-state and the animation-fill-mode property | 3
animation-delay | Specifies when the animation will start | 3
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles | 3
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle | 3
animation-fill-mode | Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay") | 3
animation-iteration-count | Specifies the number of times an animation should be played | 3
animation-name | Specifies the name of the @keyframes animation | 3
animation-play-state | Specifies whether the animation is running or paused | 3
animation-timing-function | Specifies the speed curve of the animation | 3

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples